<template>
  <div class="container">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top:10px">
      <div class="mychart" ref="mychart"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  GridComponent,
  TitleComponent,
  LegendComponent,
  TooltipComponent
} from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { reports } from '@/api/reports'
echarts.use([
  GridComponent,
  TitleComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  TooltipComponent
])
export default {
  data () {
    return {
      options: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: { type: 'category', boundaryGap: false },
        yAxis: { type: 'value' }
      }
    }
  },
  async mounted () {
    const options = await reports()
    options.series = options.series.map((item) => {
      //  smooth :  true曲线  false折线
      return { ...item, smooth: true }
    })
    const mychart = echarts.init(this.$refs.mychart)
    mychart.setOption(this.options)
    mychart.setOption(options)
    window.addEventListener('resize', () => {
      mychart.resize()
    })
  }
}
</script>

<style lang='less' scoped>
.container {
  padding: 20px;
  background-color: #f5f7f8;
  .mychart {
    width: 85%;
    height: 520px;
  }
}
</style>
